<template>
  <!-- 直播详情-数据概览 -->
  <div id="DataOverview" class="data_overview">
    <!-- <div class="notVipBoxNewWl" v-if="showPageVip">
      <img
        src="$global.staticUrl + 'image/egImg/FansPortrait.jpg'"
        class="egBgImg"
      />
      <el-dialog
        :visible="true"
        :modal-append-to-body="false"
        :lock-scroll="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :append-to-body="false"
        :show-close="false"
        custom-class="detailsDialog"
    >-->
    <!-- </el-dialog>
    </div>-->
    <template v-if="vipRootObj[5][28].owner">
      <div class="live_overview">
        <div class="live_top">
          <div class="live_top-box">
            <div class="line"></div>
            <div class="text">近30天直播概览</div>
          </div>
          <div class="live_top-more" @click="toPage('1')">更多 ></div>
        </div>
        <ul class="live_list">
          <li class="live_list-box box1">
            <div>{{ LiveOverview.liveCount }}</div>
            <div>直播场次</div>
          </li>
          <li class="live_list-box box1">
            <div>{{ LiveOverview.shopLiveCount }}</div>
            <div>带货直播</div>
          </li>
          <li class="live_list-line"></li>
          <li class="live_list-box">
            <div>{{ LiveOverview.livesales }}</div>
            <div>直播销售额</div>
          </li>
          <li class="live_list-box">
            <div>{{ LiveOverview.livevolume }}</div>
            <div>直播销量</div>
          </li>
          <li class="live_list-line"></li>
          <li class="live_list-box">
            <div>
              {{
                LiveOverview.livePriceMIN == LiveOverview.livePriceMAX
                  ? LiveOverview.livePriceMIN
                  : LiveOverview.livePriceMIN + "-" + LiveOverview.livePriceMAX
              }}
              <!-- {{ LiveOverview.livePriceMIN }}-{{ LiveOverview.livePriceMAX }} -->
            </div>
            <div>商品价格区间(元)</div>
          </li>
          <li class="live_list-line"></li>
          <li class="live_list-box">
            <div>{{ LiveOverview.avgOnlinePeople }}</div>
            <div>平均在线人数</div>
          </li>
          <li class="live_list-box">
            <div>{{ LiveOverview.peoplePeak }}</div>
            <div>观看人数峰值</div>
          </li>
          <li class="live_list-line"></li>
          <li class="live_list-box box-last">
            <div
              style="font-size: 22px"
              v-html="initTime(LiveOverview.timeDifferenceTotal)"
            ></div>
            <div>总直播时长</div>
          </li>
          <li class="live_list-box box-last">
            <div
              style="font-size: 22px"
              v-html="initTime(LiveOverview.timeDifferenceAverage)"
            ></div>
            <div>场均直播时长</div>
          </li>
        </ul>
      </div>
      <div class="goods_overview">
        <div class="live_top">
          <div class="live_top-box">
            <div class="line"></div>
            <div class="text">近30天带货概览</div>
          </div>
          <div class="live_top-more" @click="toPage('2')">更多 ></div>
        </div>
        <ul class="goods_list">
          <li>
            <div class="text">商品数</div>
            <div class="num">{{ GoodsOverview.proCount }}</div>
          </li>
          <li>
            <div class="text">商品类目</div>
            <div class="num">{{ GoodsOverview.proCategoryCount }}</div>
          </li>
          <li>
            <div class="text">商品品牌</div>
            <div class="num">{{ GoodsOverview.brandCount }}</div>
          </li>
          <li>
            <div class="text">商品来源</div>
            <div class="num">{{ GoodsOverview.profromCount }}</div>
          </li>
        </ul>
        <div class="goods_content">
          <div class="goods_charts">
            <div class="title">动销品类TOP3</div>
            <div
              class="e_box"
              v-if="
                GoodsOverview.proCategory &&
                GoodsOverview.proCategory.length &&
                !loading2
              "
            >
              <BigPie
                Etitle="品类TOP3"
                :valueData="GoodsOverview.proCategory"
              />
            </div>

            <div
              class="no_data"
              v-if="
                (!GoodsOverview.proCategory ||
                  !GoodsOverview.proCategory.length) &&
                !loading2
              "
            >
              <img src="@/assets/shi/zanwushuju.png" alt />
              暂无数据
            </div>
            <div
              v-loading="loading2"
              v-if="loading2"
              class="loading"
              element-loading-spinner="el-icon-loading"
            ></div>
          </div>

          <div class="goods_charts">
            <div class="title">品牌TOP3</div>
            <div class="e_box" v-if="GoodsOverview.brand && !loading2">
              <BigPie Etitle="品牌TOP3" :valueData="GoodsOverview.brand" />
            </div>

            <div class="no_data" v-if="!GoodsOverview.brand && !loading2">
              <img src="@/assets/shi/zanwushuju.png" alt />
              <div>暂无数据</div>
            </div>
            <div
              v-loading="loading2"
              v-if="loading2"
              class="loading"
              element-loading-spinner="el-icon-loading"
            ></div>
          </div>

          <div class="goods_charts">
            <div class="title">商品来源TOP3</div>
            <div class="e_box" v-if="GoodsOverview.profrom && !loading2">
              <BigPie
                Etitle="商品来源TOP3"
                :valueData="GoodsOverview.profrom"
              />
            </div>

            <div class="no_data" v-if="!GoodsOverview.profrom && !loading2">
              <img src="@/assets/shi/zanwushuju.png" alt />
              暂无数据
            </div>
            <div
              v-loading="loading2"
              v-if="loading2"
              class="loading"
              element-loading-spinner="el-icon-loading"
            ></div>
          </div>
        </div>
      </div>
      <div class="video_overview">
        <div class="live_top">
          <div class="live_top-box">
            <div class="line"></div>
            <div class="text">近30天视频概览</div>
          </div>
          <div class="live_top-more" @click="toPage('3')">更多 ></div>
        </div>
        <ul class="goods_list">
          <li>
            <div class="text">视频数</div>
            <div class="num">{{ VideoOverview.awemeCount }}</div>
          </li>
          <li>
            <div class="text">带货视频数</div>
            <div class="num">{{ VideoOverview.awemeProCount }}</div>
          </li>
          <li>
            <div class="text">点赞数</div>
            <div class="num">{{ VideoOverview.favoriteCount }}</div>
          </li>
          <li style="visibility: hidden">
            <!-- <div class="text">赞粉比</div>
            <div class="num">{{ VideoOverview.ffp }} : 1</div>-->
          </li>
        </ul>
        <div class="tit_box">
          <p>视频发布时间统计</p>
          <p>视频时长分布</p>
        </div>
        <div class="video_content">
          <div class="video_bar">
            <BarChart01
              v-if="VideoOverview.hy.length != 0 && !loading3"
              :xData="VideoOverview.hx"
              :series1="VideoOverview.hy"
              name1="视频个数"
              name2="视频个数"
            />
            <div
              class="no_data"
              v-if="VideoOverview.hy.length == 0 && !loading3"
            >
              <img src="@/assets/shi/zanwushuju.png" alt />
              视频发布时间统计暂无数据
            </div>
            <div
              v-loading="loading3"
              v-if="loading3"
              class="loading"
              element-loading-spinner="el-icon-loading"
            ></div>
          </div>
          <div class="video_pie">
            <!-- <PieChart :pieData="VideoOverview.awemeDurationDistribution"/> -->
            <BigPie
              v-if="awemeDurationDistribution.length != 0 && !loading3"
              :valueData="awemeDurationDistribution"
              Etitle="视频时长分布"
            />
            <div
              class="no_data"
              v-if="awemeDurationDistribution.length == 0 && !loading3"
            >
              <img src="@/assets/shi/zanwushuju.png" alt />
              视频时长分布暂无数据
            </div>
            <div
              v-loading="loading3"
              v-if="loading3"
              class="loading"
              element-loading-spinner="el-icon-loading"
            ></div>
          </div>
        </div>
      </div>
      <div class="fans_overview">
        <div class="live_top">
          <div class="live_top-box">
            <div class="line"></div>
            <div class="text">粉丝概览</div>
          </div>
          <div class="live_top-more" @click="toPage('4')">更多 ></div>
        </div>
        <div class="fans_proportion">
          <div class="proportion_item" v-if="TopData.gender">
            <!-- <img src="@/assets/shi/girlTwo.png" alt="" /> -->
            <img
              class="gender_img"
              v-if="TopData.gender.indexOf('男') == -1"
              src="@/assets/shi/girlTwo.png"
              alt
            />
            <img class="gender_img" v-else src="@/assets/shi/boy.png" alt />
            <span class="proportion_text">{{
              TopData.gender ? TopData.gender : "--"
            }}</span>
          </div>
          <div class="proportion_item">
            <img src="@/assets/shi/AgeProportion.png" alt />
            <span class="proportion_text">{{
              TopData.age ? TopData.age : "--"
            }}</span>
          </div>
          <div class="proportion_item">
            <img src="@/assets/shi/Dqproportion.png" alt />
            <span class="proportion_text">{{
              TopData.province ? TopData.province : "--"
            }}</span>
          </div>
        </div>
        <div class="fans_proportion">
          <div class="proportion_item-btm" v-if="category.length != 0">
            <div class="title">偏好商品类目TOP3</div>
            <div class="label">
              <div
                class="label-item"
                v-for="(item, index) in category"
                :key="index"
              >
                {{ item.name }}
              </div>
              <!-- <div class="label-item">零食食品</div>
              <div class="label-item">女装/男装</div>-->
            </div>
          </div>
          <div
            class="line"
            v-if="brand.length != 0 && category.length != 0"
          ></div>
          <div class="proportion_item-btm" v-if="brand.length != 0">
            <div class="title">偏好商品品牌TOP3</div>
            <div class="label">
              <div
                class="label-item"
                v-for="(item, index) in brand"
                :key="index"
              >
                {{ item.name }}
              </div>
              <!-- <div class="label-item">花西子</div>
              <div class="label-item">贵人鸟</div>-->
            </div>
          </div>
        </div>
      </div>
    </template>
    <div class="vip_pay_box" v-else>
      <div class="vip_bg_box">
        <div class="vip_bg_mask"></div>
      </div>
      <div class="vip_box_wrap">
        <payVip
          routerName="FansPortrait"
          :lowestVipNum="vipRootObj[5][28].ownerMinLevel"
        />
      </div>
    </div>
    <!-- <div
      v-loading="!pageLoading"
      v-if="!pageLoading"
      class="loading loading01"
      element-loading-text="拼命加载中..."
      element-loading-spinner="el-icon-loading"
    ></div>-->
  </div>
</template>

<script>
import PieChart from "./PieChart.vue";
import PieChart02 from "./PieChart02.vue";
import BarChart from "./BarChart.vue";
import BarChart01 from "./BarChart01.vue";
import BigPie from "@/pages/wang/talent/tdetails/component/BigPie";
export default {
  components: { PieChart, BarChart, BarChart01, PieChart02, BigPie },
  data() {
    return {
      pageLoading: false,
      LiveOverview: {},
      GoodsOverview: {},
      VideoOverview: {
        hy: [],
        hx: [],
      },
      awemeDurationDistribution: [],
      TopData: {},
      category: [],
      brand: [],
      show: false,
      showPageVip: false,
      vipRootObj: this.$store.state.userRoot, //会员权限对象
    };
  },
  computed: {},
  watch: {},
  created() {
    if (this.vipRootObj[5][28].owner) {
      this.getLiveOverview();
      this.getGoodsOverview();
      this.getVideoOverview();
      this.getAuthorFansOverview();
    }
  },
  methods: {
    toPage(e) {
      this.$emit("toFatherData", e);
    },
    getLiveOverview() {
      this.$axios
        .post("/api/Live/GetAuthorLiveOverView", {
          AuthorId: this.$route.params.id,
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.LiveOverview = res.data.data;
            this.pageLoading = true;
          }
          if (res.data.code == 1003) {
            this.showPageVip = true;
          }
        });
    },
    getGoodsOverview() {
      this.loading2 = true;
      this.$axios
        .post("/api/Product/GetSaleOfGoodsSurvey", {
          AuthorId: this.$route.params.id,
        })
        .then((res) => {
          // console.log(res)
          if (res.data.code == 0) {
            this.GoodsOverview = res.data.data;
            // this.pageLoading = true;
            this.loading2 = false;
          }
          if (res.data.code == 1003) {
            this.showPageVip = true;
          }
        });
    },
    getVideoOverview() {
      this.loading3 = true;
      this.$axios
        .post("/api/Aweme/GetAwemeOverView", {
          AuthorId: this.$route.params.id,
        })
        .then((res) => {
          // console.log(res)
          if (res.data.code == 0) {
            this.VideoOverview = res.data.data;
            this.pageLoading = true;
            this.loading3 = false;
            this.awemeDurationDistribution =
              res.data.data.awemeDurationDistribution;
          }
          if (res.data.code == 1003) {
            this.showPageVip = true;
          }
        });
    },
    getAuthorFansOverview() {
      this.$axios
        .post("/api/Author/GetAuthorFansOverview", {
          authorId: this.$route.params.id,
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.TopData = res.data.data;
            this.category = res.data.data.category;
            this.brand = res.data.data.brand;
          }
          if (res.data.code == 1003) {
            this.showPageVip = true;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 跳直播详情
    toLiveDetails(id, tabNo) {
      let router = this.$router.resolve({
        path: `/talent_main/liveDetailsRoot/${id}/${tabNo}`,
      });
      window.open(router.href, "_blank");
    },
    // 跳达人详情
    go_to_page01(id) {
      // let router = this.$router.resolve({
      //   path: `/talent_main/tdetails/${id}/${4}`,
      // });
      // window.open(router.href, "_blank");
    },
  },
};
</script>

<style scoped lang="less">
.data_overview {
  .vip_pay_box .vip_bg_box {
    background: url("~@/assets/shi/vipLeveBgc1.png") no-repeat;
  }
  .live_top {
    display: flex;
    justify-content: space-between;
    .live_top-box {
      display: flex;
      align-items: center;
      color: #222;
      font-weight: 600;
      .line {
        width: 4px;
        height: 16px;
        border-radius: 100px;
        margin-right: 6px;
        background-color: #fd7f2c;
      }
    }
    .live_top-more {
      font-size: 14px;
      color: #fd7f2c;
      cursor: pointer;
    }
  }
  .live_list {
    display: flex;
    padding: 40px 0 42px;
    flex-wrap: wrap;
    .live_list-box {
      width: 11%;
      text-align: center;
      // padding-left: 30px;
      // box-sizing: border-box;
      div:nth-child(1) {
        font-size: 24px;
        // font-weight: 600;
        font-family: DINAlternate-Bold;
        color: #222;
      }
      div:nth-child(2) {
        font-size: 12px;
        color: #888;
      }
      .time {
        font-size: 16px;
        font-weight: 500;
      }
    }
    .box1 {
      width: 8%;
    }
    .box-last {
      width: 14%;
    }
    .live_list-line {
      width: 1px;
      height: 48px;
      background-color: #e5e5e5;
    }
  }

  .goods_list {
    display: flex;
    margin-top: 20px;
    li {
      width: 25%;
      height: 50px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-right: 20px;
      // padding: 0 60px;
      // box-sizing: border-box;
      border-radius: 4px;
      background-color: #f5f5f5;
    }
    li:last-child {
      margin-right: 0;
    }
    .text {
      font-size: 14px;
      color: #888;
    }
    .num {
      font-size: 18px;
      color: #222;
      font-family: DINAlternate-Bold;
    }
  }
  .goods_content {
    display: flex;
    .goods_charts {
      width: 33.33%;
      height: 300px;
      .title {
        text-align: center;
        font-size: 14px;
        color: #555;
        margin-top: 36px;
      }
      .e_box {
        height: 230px;
      }
    }
    .no_data {
      // width: 33.33%;
      height: 300px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      color: #b5b5b5;
    }
  }
  .video_content {
    display: flex;
    .video_bar {
      width: 66%;
      height: 300px;
      margin-top: 30px;
    }
    .no_data {
      // width: 33.33%;
      height: 300px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      color: #b5b5b5;
    }
    .video_pie {
      width: 33%;
      height: 270px;
      margin-top: 30px;
      .no_data {
        height: 300px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        color: #b5b5b5;
      }
    }
  }
  .fans_proportion {
    display: flex;
    padding: 35px 0;
    .proportion_item {
      width: 358px;
      margin-left: 50px;
      border-right: 1px solid #efefef;
      .gender_img {
        width: 24px;
        height: 24px;
      }
    }
    .proportion_item:first-child {
      margin-left: 0;
    }
    .proportion_item:last-child {
      border-right: none;
    }
    .proportion_item-btm {
      // width: 285px;
      width: 360px;
      margin-left: 50px;
    }
    .proportion_item-btm:first-child {
      margin-left: 0;
    }
    .line {
      width: 1px;
      height: 25px;
      background-color: #efefef;
      margin: 15px 0;
    }
    .proportion_text {
      font-size: 14px;
      color: #222;
      margin-left: 10px;
    }
    .title {
      font-size: 14px;
      color: #555;
    }
    .label {
      display: flex;
      margin-top: 10px;
      .label-item {
        // width: 74px;
        height: 26px;
        line-height: 26px;
        font-size: 13px;
        color: #555555;
        text-align: center;
        padding: 0 10px;
        box-sizing: border-box;
        border-radius: 4px;
        margin-right: 10px;
        background-color: #fff7ee;

        white-space: nowrap;
      }
    }
  }
  .fans_proportion:nth-child(2) {
    padding-bottom: 0;
  }
  .family {
    font-family: DINAlternate-Bold;
  }
}
@media screen and (max-width: 1400px) {
  #DataOverview .live_list {
    padding-top: 20px;
  }
  #DataOverview .live_list .live_list-box {
    width: 19%;
    margin-top: 20px;
  }
  #DataOverview .live_list .live_list-box div:first-child {
    font-size: 20px;
  }
  #DataOverview .live_list .live_list-line {
    margin-top: 20px;
  }
}
.tit_box {
  width: 100%;
  padding-top: 20px;
  display: flex;
  p {
    font-size: 14px;
    color: #222;
    text-align: center;
    &:nth-child(1) {
      width: 66%;
    }
    &:nth-child(2) {
      width: 34%;
    }
  }
}
</style>
